<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title th:text="${course['courseName']}+' - 课程详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <div data-th-replace="layout/common-hade-one"></div>
    <div style="display: none;">
        <input type="hidden" id="courseId" th:value="${course['id']}"/>
        <input type="hidden" id="courseType" th:value="${course['courseTypeKey']}"/>
        <input type="hidden" id="contextStatus" th:value="${course['contextStatus']}"/>
        <input type="hidden" id="subjectIds" th:value="${course['subjectIds']}"/>
        <input type="hidden" id="price" th:value="${course['realPrice']}"/>
        <input type="hidden" id="buyCourse" th:value="${course['courseBuyStatus']['buy']}"/>
        <input type="hidden" id="classesUrl" th:value="${classesUrl}"/>
        <input type="hidden" id="mobilePath" th:value="${mobilePath}"/>
    </div>
    <div class="cm-bg-20">
        <div class="course-info__wrap">
            <div class="container">
                <ol class="breadcrumb mt20">
                    <li><a href="/" class="c-ccc">首页</a></li>
                    <li><a th:href="@{/web/course/courseList}" class="c-ccc">全部课程</a></li>
                    <li class="active c-ccc" th:text="${course['courseName']}"></li>
                </ol>
                <div class="mt20">
                    <div class="course-imgTxtAttr-free">
                        <div class="course-imgLeft-box" th:style="'background: url('+${staticPath}+'/front/web/v3/img/course-info-img-bg.png) no-repeat;width: 478px;height: 313px;position: absolute;top: 0;left: 0;'"></div>
                        <section class="course-imgLeft-free">
                            <div class="course-imgLeft-bx">
                                <aside class="c-banner-cover-video">
                                    <a th:if="${course['courseTypeKey']} == 'LIVE'" href="javascript:void(0)">
                                        <button class="btn btn-lg btn-primary btn-rounded" type="button"><i class="fa fa-play mr10"></i> <th:block th:text="${course['courseBuyStatus']['buy']} ? '立即学习' : '免费试听'"></th:block></button>
                                    </a>
                                    <a th:if="${course['courseTypeKey']} == 'PACKAGE'" href="javascript:void(0)">
                                        <button class="btn btn-lg btn-warning btn-rounded" type="button"><i class="fa fa-play mr10"></i> <th:block th:text="${course['courseBuyStatus']['buy']} ? '立即学习' : '免费试听'"></th:block></button>
                                    </a>
                                    <a th:if="${course['courseTypeKey']} == 'COLUMNS'" href="javascript:void(0)">
                                        <button class="btn btn-lg btn-success btn-rounded" type="button"><i class="fa fa-play mr10"></i> <th:block th:text="${course['courseBuyStatus']['buy']} ? '立即学习' : '免费试听'"></th:block></button>
                                    </a>
                                    <a th:if="${course['courseTypeKey']} == 'VIDEO'" href="javascript:void(0)">
                                        <button class="btn btn-lg btn-info btn-rounded" type="button"><i class="fa fa-play mr10"></i> <th:block th:text="${course['courseBuyStatus']['buy']} ? '立即学习' : '免费试听'"></th:block></button>
                                    </a>
                                </aside>
                                <img th:attr="data-original=!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(course['imageMap']['pcUrlMap']['large'])}? ${course['imageMap']['pcUrlMap']['large']}:''" class="c-img-left lazy" width="454" height="256"/>
                            </div>
                        </section>
                        <section class="course-txtAttr-free">
                            <h4 class="c-page-title">
                                <span th:if="${course['courseTypeKey']}=='LIVE'" class="label label-primary label-inline fs12 vam mr5">直播</span>
                                <span th:if="${course['courseTypeKey']}=='PACKAGE'" class="label label-warning label-inline fs12 vam mr5">套餐</span>
                                <span th:if="${course['courseTypeKey']}=='COLUMNS'" class="label label-success label-inline fs12 vam mr5">专栏</span>
                                <span th:if="${course['courseTypeKey']}=='VIDEO'" class="label label-info label-inline fs12 vam mr5">录播</span>
                                <span class="fs18 c-fff vam" th:text="${course['courseName']}"></span>
                            </h4>
                            <section class="mt20 cm-desc-txt__twoLine">
                                <span class="fs14 c-ccc" data-toggle="tooltip" data-placement="bottom" th:attrappend="data-original-title= ${course['summary']}" th:text="${#strings.abbreviate(course['summary'],73)}"></span>
                            </section>
                            <section class="mt20 pt10">
                                <span class="fs14 c-fff">讲师：</span>
                                <a th:each="teacher,index : ${course['teacherList']}" th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${teacher['id']})}" th:if="${index['index']} < 4" data-toggle="tooltip" data-placement="top" th:attrappend="data-original-title=${teacher.teacherName}" class="ml10 c-danger">
                                    <img class="img-circle lazy-user" th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}" width="34" height="34" th:alt="${teacher['teacherName']}"/>
                                </a>
                                <span th:if="!${#lists.isEmpty(course['teacherList'])} and ${#lists.size(course['teacherList'])}>4" class="fs12 c-fff" th:text="'等'+ ${#lists.size(course['teacherList'])}+'位讲师'"></span>
                                <span th:if="${#lists.isEmpty(course['teacherList'])}" class="fs12 c-fff">0位讲师</span>
                            </section>
                            <section class="mt20">
                                <aside th:if="${course['courseBuyStatus']['memberPriceBut']} or ${course['courseBuyStatus']['memberFreePriceBut']}" class="pull-right">
                                    <a th:href="@{/web/uc/member/queryMemberList}">
                                        <button type="button" class="btn btn-sm btn-outline btn-warning">
                                            <i class="fa fa-tag mr5"></i> 加入会员享受会员价：
                                            <span th:if="${course['courseBuyStatus']['memberPriceBut']}">
                                                <i class="fa fa-yen"></i><samp th:text="${course['memberPrice']}"></samp>
                                            </span>
                                            <span th:if="${course['courseBuyStatus']['memberFreePriceBut']}">免费</span>
                                        </button>
                                    </a>
                                </aside>
                                <span class="fs14 c-fff">有效期：</span>
                                <span th:if="${course['validType']}==1" class="fs12 c-fff">自购买之日起 </span>
                                <span th:if="${course['validType']}==1" class="fs16 c-danger" th:text="${course['validDay']}"></span>
                                <span th:if="${course['validType']}==1" class="fs12 c-fff"> 天内</span>

                                <span class="fs16 c-danger" th:if="${course['validType']}==2" th:text="${#strings.substring(course['validTime'],0,10)}"></span>
                                <span class="fs12 c-fff" th:if="${course['validType']}==2"> 前可反复学习，</span>
                                <div>
                                    <span class="fs16 c-danger" th:if="${course['validType']}==2" th:text="${#strings.substring(course['dontBuyTime'],0,10)}"></span>
                                    <span class="fs12 c-fff" th:if="${course['validType']}==2"> 前可自由报名</span>
                                </div>
                            </section>
                            <section class="mt20">
                                <span class="c-fff">更新至：</span>
                                <span th:if="${course['contextStatus']} == 1" id="last-update" class="c-danger">暂无更新</span>
                                <span th:if="${course['contextStatus']} == 2" class="c-danger">本课已全部完结</span>
                                <span class="ml20 c-fff"></span>
                            </section>
                        </section>
                    </div>
                </div>
                <div class="mt20 pt10">
                    <section class="clearfix text-right mr10">
                        <aside class="pull-right ml20 pr">
                            <a href="javascript:void(0)" id="QRCodeInp" class="c-999" data-container="body" data-trigger="hover" data-html="true" data-toggle="popover" data-placement="left" data-content="<img src='https://fimage.268xue.com/upload/0/yzl/common/2018101111/f325a9ff3176c322e7a79472c34b30c9.jpg' width='140' height='140' style='width:140px;height:140px;' />">
                                <i class="fa fa-qrcode fs16 mr5 vam"></i>扫一扫学习
                            </a>
                        </aside>
                        <aside class="pull-right ml20" data-share>
                            <a href="javascript:void(0)" class="c-999 oShareBtn"  th:attr="data-mobile=${mobilePath}+${mobilePathShare},data-share=!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['pcUrlMap'])} and !${#strings.isEmpty(course['imageMap']['pcUrlMap']['large'])}? ${course['imageMap']['pcUrlMap']['large']}:''" >
                                <i class="fa fa-share mr5 vam"></i>分享</a>
                        </aside>
                        <!--收藏功能暂时没有完善,后期开发,勿删
                        <aside class="pull-right ml20">
                            <a href="javascript:void(0)" class="c-999" id="favorites-course" title="收藏"><i class="fa fa-star-o mr5"></i>收藏</a>
                        </aside>-->
                        <aside th:if="${course['courseBuyStatus']['addCartBut']}" class="pull-right ml20" id="buy-but-box">
                            <a href="javascript:void(0)" th:attrappend="data-s-id=${course['id']}" data-type="COURSE" data-num="1" class="c-999 a-s-c-d">
                                <i class="fa fa-shopping-cart fs16 mr5 van"></i>加入购物车
                            </a>
                        </aside>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div class="mb20 pb10">
        <div class="container">
            <div class="course-buy-attr__wrap">
                <div class="cm-wbg__bx">
                    <div class="row">
                        <div class="col-md-5 col-lg-6 cm-attr-alert">
                            <div class="alert alert-info">
                                <section class="hLh20 txtOf" id="activityList">
                                    <span class="label label-primary fs12 mr5">活动</span>
                                    <span class="c-666 fs12" id="activity-context-box">暂无活动</span>
                                </section>
                                <section class="hLh20 txtOf mt5">
                                    <span class="label label-warning fs12 mr5">服务</span>
                                    <span class="c-666 fs12" th:text="${course['courseService']}"></span>
                                </section>
                                <section class="hLh20 mt5">
                                    <span class="label label-danger fs12 mr5 pull-left">优惠</span>
                                    <span class="c-666 fs12 pull-left">学习更轻松，快来领取优惠券吧！</span>
                                    <aside class="pull-left dropdown m-l">
                                        <a href="javascript:;" id="show-receive-btn" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle fs12 c-info"> 点击领取 <span class="caret"></span></a>
                                        <div class="dropdown-menu dropdown-box">
                                            <ul class="opCard-item__wrap" id="course-coupon-list">
                                            </ul>
                                        </div>
                                    </aside>
                                </section>
                            </div>
                        </div>
                        <div class="col-md-7 col-lg-6 mt10 mb10">
                            <div class="clearfix">
                                <section class="pull-right ml20">
                                    <div class="btn-group cm-buy-group">
                                        <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 )">
                                            <button th:if="!${course['courseBuyStatus']['buy']} and (${course['courseBuyStatus']['buyBut']} or ${course['courseBuyStatus']['memberBut']})" id="pay-course" type="button" class="btn btn-lg btn-w-m btn-danger">
                                                <span th:if="${course['courseBuyStatus']['buyBut']}" data-type="1">立即报名</span>
                                                <span th:if="${course['courseBuyStatus']['memberBut']} and !${course['courseBuyStatus']['buyBut']}" data-type="2">开通会员</span>
                                            </button>
                                            <button th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['freeBuyBut']}" type="button" th:attrappend="data-course-id=${course['id']},data-pay-type=${course['courseBuyStatus']['payType']}" class="btn btn-lg btn-w-m btn-danger free-bm-box">
                                                <span>免费报名</span>
                                            </button>
                                        </th:block>
                                        <th:block th:if="(${course['status']}==2  or ${course['status']}==3 ) and !${course['courseBuyStatus']['buy']} ">
                                            <button  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" id="abandoned" class="btn btn-lg btn-w-m btn-danger">
                                                <span >课程已下架</span>
                                            </button>
                                        </th:block>

                                        <button th:if="${course['courseBuyStatus']['buy']}" type="button" th:attrappend="data-course-id=${course['id']}" class="btn btn-lg btn-w-m btn-success play-btn">
                                            <span>立即学习</span>
                                        </button>


                                        <a th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:${serviceMap['context']}">
                                            <button type="button" class="btn btn-lg btn-w-m btn-warning">在线咨询</button>
                                        </a>
                                    </div>
                                </section>
                                <aside class="pull-right mt5">
                                    <span th:if="${course['courseBuyStatus']['freePriceBut']}" class="fs24 c-primary">免费</span>
                                    <small th:if="${course['courseBuyStatus']['priceBut']}" class="fs16 c-warning"><i class="fa fa-yen"></i></small>
                                    <span th:if="${course['courseBuyStatus']['priceBut']}" class="fs30 c-warning" th:text="${course['realPrice']}"></span>
                                </aside>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt20 pt10 mb20 pb10">
                <div class="row">
                    <div class="col-sm-9">
                        <section class="c-info-tab">
                            <h4 th:if="${course['courseTypeKey']}=='PACKAGE'" data-tab="details"><span class="fs16 c-333">套餐详情</span></h4>
                            <h4 th:if="${course['courseTypeKey']}=='PACKAGE'" class="active" data-tab="catalogs"><span class="fs16 c-333">套餐课程(<font id="package-course-box" th:text="${course['courseNum']}">0</font>)</span></h4>
                            <h4 th:if="${course['courseTypeKey']}=='PACKAGE'" data-tab="comments"><span class="fs16 c-333">学员评价<font th:text="${#strings.concat('(', commentCount,')')}"></font></span></h4>
                            <h4 th:if="${course['courseTypeKey']} !='PACKAGE'" data-tab="details"><span class="fs16 c-333">课程详情</span></h4>
                            <h4 th:if="${course['courseTypeKey']} !='PACKAGE'" class="active" data-tab="catalogs"><span class="fs16 c-333">课程目录</span></h4>
                            <h4 th:if="${course['courseTypeKey']} !='PACKAGE'" data-tab="comments"><span class="fs16 c-333">学员评价<font th:text="${#strings.concat('(', commentCount,')')}"></font></span></h4>
                        </section>
                        <div class="c-cont__wrap">
                            <!--介绍 开始-->
                            <article class="hide" data-tab="details">
                                <section th:if="${#strings.isEmpty(course['details'])}" class="no-data__wrap">
                                    <span class="no-data-ico"></span>
                                    <p class="mt20"><span class="c-666">暂无详情介绍~~</span></p>
                                </section>
                                <section th:if="not ${#strings.isEmpty(course['details'])}">
                                    <div class="mt20 pt10 mr20 ml10" th:utext="${course['details']}">
                                    </div>
                                </section>
                            </article>
                            <!--介绍 结束-->
                            <!--目录 开始-->
                            <article data-tab="catalogs">
                                <div class="mt20 pt10 mr20 ml10" id="course-catalog-box">
                                    <div class="text-center pt10 pb10">
                                        <span class="loading"></span>
                                    </div>
                                </div>
                            </article>
                            <!--目录 结束-->
                            <!--评论 开始-->
                            <article class="hide" data-tab="comments" id="comment-container"></article>
                            <!--评论 结束-->
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <!--综合评价 结束-->
                        <section class="c-head-title">
                            <h6><span class="fs16 c-333">讲师</span></h6>
                            <hr>
                        </section>
                        <div class="carousel-inner">
                            <div th:if="${#lists.isEmpty(course['teacherList'])}" class="item active bespeak-item">
                                <span class="no-data__wrap">
                                    <span class="no-data-ico"></span>
                                    <p class="mt20"><span class="c-666">暂时没有讲师哦~~~</span></p>
                                </span>
                            </div>
                            <div th:if="!${#lists.isEmpty(course['teacherList'])}">
                                <section th:each="teacher,index : ${course['teacherList']}" th:if="${index['index']} < 4"  class="clearfix mt20">
                                    <div class="media">
                                        <div class="media-left">
                                            <a th:href="@{/web/teacher/info?teacherId={teacherId}(teacherId=${teacher['id']})}">
                                                <img class="media-object img-circle lazy-user" width="42" height="42" th:attr="data-original=${teacher['imageMap']['pcUrlMap']['large']}"/>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <span class="fs14 c-666" th:text="${teacher['teacherName']}"></span></h4>
                                        </div>
                                        <div th:if="${teacher['isQuestion']}==1" class="media-right askQuestions" data-quiz th:attr="data-teacher-id=${teacher['id']}">
                                            <a href="javascript:void(0)"><button   class="btn btn-sm btn-info btn-rounded btn-outline" type="button">向TA提问</button></a>
                                        </div>
                                        <div class="mt10 wm-info-teacher-desc__wrap">
                                            <p class="fs12 c-999" th:text="${teacher['depict']}"></p>
                                        </div>
                                    </div>
                                    <hr th:if="${index['index']} < 3"/>
                                </section>
                            </div>
                        </div>

                        <section th:if="!${#lists.isEmpty(classes)}" class="mt20 pt10">
                            <section class="c-head-title">
                                <h6><span class="fs16 c-333">课程关联班级</span></h6>
                                <hr>
                            </section>
                            <div class="media">
                                <a th:each="class :${classes}" th:href=" @{/web/classes/info?id={id}(id=${class['id']})}" target="_blank">
                                    <div class="media-left">
                                        <img th:attr="data-original=${class['imageMap']['pcUrlMap']['small']}" width="100" class="lazy">
                                    </div>
                                    <div class="media-body">
                                        <div class="sc-item-title">
                                            <span  th:text="${class['name']}" class="c-333 fs14"></span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--快捷登录 结构内容 开始-->
    <textarea class="hide" id="loginFastEle__wrap">
        <div class="loginfase__wrap">
            <div class="mt20 pt10 mb20 pb10 ml20 mr20">
                <section class="c-info-tab text-center">
                    <h4 class=""><span class="fs18" style="color: #333">用户登录</span></h4>
                </section>
                <section class="mt20 pt10 pb10 mb20">
                    <div style="text-align: center;margin: 5px;display: none;">
                        <div class="c-danger">
                            <i class="fa fa-warning"></i>&nbsp;<span id="loginErrorTips"></span>
                        </div>
                    </div>
                    <div class="mr20 ml20">
                        <div class="input-group mb20"><span class="input-group-addon"><i class="fa fa-mobile-phone fs24 c-info"></i></span>
                            <input type="text" placeholder="请输入手机号/邮箱" class="form-control input-lg" data-username>
                        </div>
                        <div class="input-group mb20"><span class="input-group-addon"><i class="fa fa-unlock-alt fs18 c-info"></i></span>
                            <input type="password" placeholder="请输入登录密码" class="form-control input-lg" data-password>
                        </div>
                        <div class="hLh20">
                            <aside class="pull-right">
                                <a href="${userWebPath}/web/user/login" class="c-999">没有账号，去注册？</a>
                                <a href="${userWebPath}/web/user/retrievePassword" class="c-999 ml20">忘记密码 <i class="fa fa-question-circle"></i></a>
                            </aside>
                            <aside class="pull-left">
                                <label class="i-checks" data-toggle="tooltip" data-placement="top" data-original-title="公共场所不建议勾选">
                                    <input type="checkbox" checked class="vam" style="margin: 0" data-auto/> <span class="vam">自动登录</span>
                                </label>
                            </aside>
                        </div>
                        <div class="mt20 pt10">
                            <button type="button" id="loginBtn" class="btn btn-lg btn-block btn-info unRadius"> 登 录 </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </textarea>
    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/web/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-info.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-activity-code.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/favorites/course-favorites.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/courseComment/course-comment.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-catalog.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/business/course/cou/course-guideBuy.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/front/web/common/shareFn.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/qrcode/qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/common/qrcode/jquery.qrcode.min.js?v={v}(path=${staticPath}, v=${v})}"></script>
</body>
</html>